<template>
  <div :class="bem()">
    <div :class="bem('header')">
      <router-link to="/">
        <home-filled/>
        主页
      </router-link>
    </div>
    <div :class="bem('body')">
      <a-steps :current="currentStep" class="p-t-40 p-b-40" style="z-index: 0!important;">
        <a-step title="阅读注册须知"/>
        <a-step title="填写基本信息"/>
        <a-step title="完成注册登录"/>
      </a-steps>

      <div :class="bem('body-form')">
        <!--第一步-->
        <div v-if="currentStep === 0" :class="bem('body-form-box','step0')">
          <div :class="[bem('body-form-box-title'),'p-b-15']">注册须知</div>
          <div :class="bem('body-form-box','step0-content')">
            欢迎来到国家电投集团煤炭现货采购平台（以下简称本平台）。本平台是国家电投集团有限公司所属各燃料采购单位进行燃料集中竞价采购的唯一电子采购平台。在您注册成为本平台供应商前务必仔细阅读以下须知。
            1.总则
            1.1供应商在本平台注册成功后，即视为同意本须知的所有条款并愿意接受本须知所有条款的约束。
            1.2 在本平台注册的供应商应当是依据中华人民共和国法律合法成立的企业法人，需具有完全民事行为能力，能够依法独立享有民事权利和承担民事义务，煤炭经销或运输等行为符合其经营范围。
            1.3 供应商承诺通过本平台达成的煤炭交易或运输服务等行为完全符合国家法律法规及本平台对煤炭竞价管理的规则。
            1.4 本平台保留在中华人民共和国大陆地区施行法律允许的范围内独自决定拒绝服务、关闭供应商账户、清除或编辑内容的权利。
            2.注册会员
            2.1注册条件。凡依法经工商部门注册合格的独立企业法人，正常经营且注册资金500万元（含）及以上，经营范围包含煤炭经销的相关内容，具有良好的银行资信和商业信誉，未处于被责令停业，财产未被接管、冻结，未处于破产状态的企业均可注册。
            2.2网上注册。供应商注册实行开放注册审核机制。供应商登陆本平台，只要按本平台要求步骤填写并上传有效资质文件扫描件即可申请注册，由本平台系统按照预设条件自动审查并提交准入审核。本平台系统内设置供应商注册信息必选必填项，供应商按本平台要求录入资质信息，包括：合法有效的营业执照、税务登记证、组织机构代码证（或“三证合一”的证件）、开户许可证、法定代表人身份证、法定代表人授权书、受托人（注册联系人）身份证、地址、联系方式及开票信息等，并上传对应的证件扫描件，提交申报的二级公司审核。供应商注册信息填报不完整、不准确则无法进入下一步操作。
            2.3注册审核。二级公司在5个工作日内对供应商的注册（或资质变更）申请进行真实性审查，审查通过后，供应商即注册成功，成为本平台的正式供应商。供应商在本平台中只需申请注册一次，即具备在注册类别（煤炭、物流等）内参与本平台所有采购单位竞价的资格，响应竞价公告要求进行报价。
            2.4资质复审。本平台所有采购单位对竞价成功的供应商资质均应进行复审，对其提供资质信息资料的真实性、完整性、准确性负同等负责。
            3.供应商的权利和义务
            3.1供应商的权利
            3.1.1供应商在完全同意本须知及本平台相关规定的前提下，有权享有本平台的服务。
            3.1.2供应商注册成功后，将获得用户名和密码等账户信息，请自行修改密码。
            3.1.3通过二级单位审核通过的供应商，即具备参与相应二级单位竞价项目的资格。
            3.1.4供应商可自行登录本平台查询申报的采购单位发出的竞价公告，在阅读并同意竞价公告内容后，即可填写报价及有关信息，按程序参与竞价。
            3.1.5供应商在本平台上可随时查询自身准入、报价等信息。
            3.1.6供应商可以浏览本平台提供的其它交易和市场信息。
            3.1.7供应商有权终止使用本平台。
            3.1.8本平台规定供应商应享有的其它权利。
            3.2供应商的义务
            3.2.1供应商按照要求进行实名注册，必须保证所提供的注册资料真实、准确、完整、合法有效。注册资料有变动的，应及时更新。供应商如提供虚假信息，本平台保留终止其使用本平台各项服务的权利，由此引起的相应责任及后果由供应商自行承担。国家电力投资集团有限公司将对以上信息进行不定期核查，如发现信息与实际不符的情况，有权停用该供应商账户。
            3.2.2供应商应谨慎合理的保存、使用其供应商用户名和密码。如因保管不善，丢失或泄露，由此引起的后果由供应商承担。
            3.2.3供应商在本平台注册的账号仅限本企业使用，不得将其账号转借给个人或其它单位使用，否则自行承担由此产生的全部法律责任及经济责任。通过注册账号在本平台进行的所有言论和行为均视为注册该账号的供应商的言论和行为。
            3.2.4供应商应保证通过本平台竞价销售的煤炭系合法所有并可依法销售。
            3.2.5供应商在煤炭交易过程中，不得存在隐瞒、欺诈行为，通过本平台开展的煤炭交易均真实有效。
            3.2.6供应商应经常关注并遵守本平台不时公布或修改的各类合法规则规定。
            4. 国家电力投资集团有限公司的权利和义务
            4.1权利
            4.1.1 当供应商违反本须知时，本平台有权做出独立判断并采取暂停或关闭供应商账号等措施。供应商须对自己在网上的言论和行为承担法律责任。
            4.1.2本平台通过监督检查发现不符合注册资格的供应商，有权做出独立判断并采取删除其注册信息、暂停或关闭供应商账号等措施。
            4.1.3本平台保留删除站内各类不符合法律政策或不真实的信息内容而无须通知供应商的权利。
            4.1.4当出现安全方面的紧急情况时，本平台有权暂停服务。
            4.2义务
            4.2.1本平台向供应商公示竞价公告和供应商的准入等信息。
            4.2.2本平台为供应商提供公平的竞价交易环境。
            4.2.3本平台搜集、整理并定期发布相关燃料市场信息，尽最大努力保证信息的准确性。由于市场行情及销售情况会随时发生变动及网络和电脑终端兼容性等客观原因存在，本平台显示的信息可能会有一定的滞后性或偏差。
            5.须知更新
            5.1根据国家法律法规变化及运营需要，本平台有权对本须知条款进行修改，修改后的须知一旦发布即生效，并代替原来的须知。
            5.2供应商有义务经常关注并阅读最新版的须知或公告。如供应商不同意更新后的须知或公告，可以停止接受本平台提供的服务；如供应商继续使用本平台提供的服务，即视为同意更新后的须知或公告。
            6.隐私条款
            6.1 本平台对供应商资料的使用。供应商同意并授权本平台合理使用其资料，以保证供应商在本平台进行安全交易。供应商授权本平台使用的资料包括但不限于注册时提交的资料、本平台通过供应商交易行为所获取的其它资料。
            6.2本平台对供应商资料的保密。本平台采用行业标准惯例来确保供应商隐私信息、资料的保密性及安全性，但鉴于技术限制，本平台不能确保供应商的资料不会通过本隐私条款中未列明的途径泄露出去。除本平台人为过错导致的信息泄露外，本平台不承担任何责任。
            6.3本平台对供应商的信息及资料负保密义务，但下列情形除外:
            6.3.1适用法律法规或上市规则要求披露的；
            6.3.2司法部门或政府部门要求披露的；
            6.3.3供应商同意或授权采购平台进行披露的。
            6.4在本平台提供的交易活动中，供应商无权要求本平台提供其它供应商的个人及公司资料。
            7.法律适用
            本须知的订立、执行和解释及争议的解决均适用在中华人民共和国大陆地区有效法律(但不包括其冲突法规则)。如发生本须知某些条款与适用法律相抵触时，则这些条款将完全按法律规定重新解释，而其它有效条款继续有效。
            8.免责声明
            8.1除非另有明确的书面说明,本平台提供给供应商的全部信息和服务，均是在“按现状”和“按现有”的基础上提供的。
            8.2
            本平台作为网络服务方，与注册供应商之间仅存在服务合同关系，对注册供应商的经营活动发生的任何风险或责任不负连带赔偿责任或义务，对供应商通过本平台竞价与采购单位所达成的交易合同及其履行结果不承担任何责任，供应商与采购单位间的争议、纠纷不影响本须知的执行。
            8.3若供应商自身提供信息错误的，给供应商带来的任何经济损失，本平台不承担任何法律责任及连带责任。同时，供应商应及时更改、删除错误信息。
            8.4如因不可抗力或其它无法控制的原因，使本平台系统崩溃或无法正常使用，导致网上竞价无法完成或丢失有关信息、记录等，本平台会合理地尽力协助处理善后事宜，但本平台对此无需承担相应的法律责任。
            9.其它
            9.1采购平台尊重所有注册供应商的合法权利，本须知及本平台上发布的各类规则、声明等其它内容，均是为了更好地、更加便利地为注册供应商提供服务。欢迎注册供应商和社会各界提出意见和建议，本平台将适时修改本须知及各类规则。
            9.2供应商点击本须知下方的“同意”按钮即视为供应商完全接受本须知并受本须知约束。请在点击之前再次确认已经知悉并完全理解本须知的全部内容。

            2020年12月15日
          </div>
          <div class="text-center">
            <a-checkbox class="m-t-10" v-model:checked="isAgree">我已阅读并同意 《用户注册协议和隐私条款》</a-checkbox>
            <p class="m-t-10">
              <a-button class="m-r-10" type="primary" @click="go('/login')" ghost>返回</a-button>
              <a-button type="primary" :disabled="!isAgree" @click="currentStep = 1">确认</a-button>
            </p>
          </div>
        </div>

        <!--第二步-->
        <div v-else-if="currentStep === 1" :class="bem('body-form-box','step1')">

          <div :class="[bem('body-form-box-title')]">供应方/需求方注册信息</div>
          <div class="text-center" style="color:#999;font-weight: bold">提示：申报人如实填写申报信息，带“<span
              style="color:red;">*</span>”为必填内容
          </div>
          <a-form
              :model="form"
              name="register"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 16 }"
              autocomplete="off"
              @finish="onFinish"
              @finishFailed="onFinishFailed"
          >
            <div :class="bem('body-form-box','step1-content')">
              <div class="m-center">
                <a-form-item
                    label="供应方/需求方名称"
                    name="realName"
                    :rules="[{ required: true, message: '不能为空' }]"
                >
                  <a-input placeholder="请输入供应方/需求方名称" class="f-input" v-model:value="form.realName"/>
                </a-form-item>
                <a-form-item
                    label="统一社会信用代码"
                    name="creditCode"
                    type="number"
                    :rules="[{ required: true, message: '不能为空' },{max:20,min:16,message: '请输入16-20位的社会信用代码',trigger: 'blur'}]"
                >
                  <a-input placeholder="统一社会信用代码" class="f-input" v-model:value="form.creditCode"/>
                </a-form-item>
                <a-form-item
                    label="登录名"
                    name="username"
                    :rules="[{ required: true, message: '不能为空' },{max:16,min:6,message: '用户名必须是6-16位',trigger: 'blur'}]"
                >
                  <a-input placeholder="请输入英文字母和数字及4~20位的字符" class="f-input" v-model:value="form.username"/>
                </a-form-item>

                <a-form-item
                    label="密码"
                    name="password"
                    :rules="[{ required: true, message: '请输入密码' }]"
                >
                  <a-input-password placeholder="请输入密码" class="f-input" v-model:value="form.password"/>
                </a-form-item>

                <a-form-item
                    label="确认密码"
                    name="confirmPassword"
                    :rules="[{ required: true, message: '确认密码不能为空' },
                   { required: true, message: '两次密码不一致', pattern: new RegExp('^'+form.password + '$') ,trigger: 'blur'}]"
                >
                  <a-input-password placeholder="请输入确认密码" class="f-input" v-model:value="form.confirmPassword"/>
                </a-form-item>

                <a-form-item
                    label="联系人姓名"
                    name="contacts"
                    :rules="[{ required: true, message: '不能为空' }]"
                >
                  <a-input placeholder="请输入联系人姓名" class="f-input" v-model:value="form.contacts"/>
                </a-form-item>

                <a-form-item
                    label="联系人手机号"
                    name="phone"
                    :rules="[{ required: true, message: '不能为空' },{pattern:/^1[3-9]\d{9}$/, message:'请输入正确的手机号',trigger: 'blur'}]"
                >
                  <a-input placeholder="请输入联系人手机号" class="f-input" v-model:value="form.phone"/>
                </a-form-item>
                <a-form-item
                    label="验证码"
                    name="codeImg"
                    :rules="[{ required: true, message: '不能为空' },{len:4,message: '图片验证码必须是4位'}]"
                >
                  <div class="f-input">
                    <a-input placeholder="请输入验证码" style="width: 120px;" v-model:value="form.codeImg"/>
                    <img @click="changeCode" ref="codeRef" class="verify-code" :src="codeUrl"/>
                  </div>
                </a-form-item>

                <!--                <a-form-item-->
                <!--                    label="手机验证码"-->
                <!--                    name="codeSms"-->
                <!--                    :rules="[{ required: true, message: '不能为空' }]"-->
                <!--                >-->
                <!--                  <div class="f-input">-->
                <!--                    <a-input placeholder="请输入手机验证码" style="width: 150px;" v-model:value="form.codeSms"/>-->
                <!--                    <a-button style="float: right" type="primary">获取短信验证码</a-button>-->
                <!--                  </div>-->
                <!--                </a-form-item>-->
                <a-form-item
                    label="联系人邮箱"
                    name="email"
                    type="email"
                    :rules="[{ required: true, message: '不能为空' },{pattern:/^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/,message: '请输入正确的邮箱格式',trigger: 'blur'}]"
                >
                  <a-input placeholder="请输入邮箱" class="f-input" v-model:value="form.email"/>
                </a-form-item>
                <a-form-item
                    label="邮箱验证码"
                    name="codeSms"
                    :rules="[{ required: true, message: '不能为空' },{len:6,message: '邮箱验证码必须是6位'}]"
                >
                  <div class="f-input">
                    <a-input placeholder="请输入邮箱验证码" style="width: 150px;" v-model:value="form.codeSms"/>
                    <a-button style="float: right" type="primary" @click="senSms" :disabled="isDisabled">{{isDisabled?`${defaultCount}s后重新发送`:'发送邮箱'}}</a-button>
                  </div>
                </a-form-item>
              </div>
            </div>
            <div class="text-center">
              <p class="m-t-10">
                <a-button class="m-r-10" type="primary" @click="currentStep = 0" ghost>上一步</a-button>
                <a-button type="primary" :disabled="!isAgree" html-type="submit" :loading="isLoading">完成注册</a-button>
              </p>
              <p>已有账号？
                <router-link to="/login" class="font-theme-color">登录</router-link>
              </p>
            </div>
          </a-form>
        </div>

        <div v-else-if="currentStep === 2" :class="bem('body-form-box','step2')">
          <div class="text-center m-t-50">
            <check-circle-filled class="font-theme-color" style="font-size: 4rem"/>
            <div style="font-size: 2rem" class="m-t-20 m-b-20"> 恭喜您！已完成注册</div>
            <a-button type="primary" @click="go('/login')">立即登录</a-button>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {HomeFilled, CheckCircleFilled} from '@ant-design/icons-vue'
import {createBEM} from "/@/utils/bem";
import {reactive, Ref, ref} from "vue";
import {useGo} from "/@/hooks/web/usePage";
import {useGlobSetting} from "/@/config";
import {register} from "/@/api/sys/user";
import {RegisterUserParam} from "/@/api/sys/model/userModel";
import {useMessage} from "/@/hooks/web/useMessage";
import {EmailModel, sendEmail, verifyEmail} from "/@/api/console/email";

const go = useGo();
const [bem] = createBEM('register');
const currentStep = ref(0); //当前的进度
const isAgree = ref(false); //是否同意协议

const {createMessage} = useMessage();

//验证码相关
const {urlPrefix, apiUrl} = useGlobSetting();
const codeUrl = apiUrl + urlPrefix + '/verify-code'
const codeRef = ref<any>(null);

function changeCode() {
  codeRef.value.src = codeUrl + "?" + Math.random();
}

const count = 60;
const isDisabled = ref(false);
const defaultCount = ref(count);

interface registerForm {
  contacts: string;
  creditCode: string;
  deptId: number;
  phone: string;
  email: string;
  realName: string; //供应商名称
  username: string;
  password: string;
  confirmPassword: string;
  codeImg: string; // 图片验证码
  codeSms: string; //短信验证码
}

function useForm(currentStep: Ref) {
  const isLoading = ref(false);
  const form = reactive<registerForm>({
    contacts: '',
    creditCode: '',
    deptId: 0,
    phone: '',
    email: '',
    realName: '', //供应商名称
    username: '',
    password: '',
    confirmPassword: '',
    codeImg: '', // 图片验证码
    codeSms: '', //邮箱验证码
  });


  //完成事件
  async function onFinish(values: any) {
     verifyEmail(form.codeSms).then(res => {
       isLoading.value = true;
       register(form as RegisterUserParam).then(() => {
         isLoading.value = false;
         setTimeout(() => {
           createMessage.success('注册成功')
           currentStep.value = 2;
         }, 1000)
       }).catch(() => {
         isLoading.value = false;
       });
     }).catch(() => {
       createMessage.success('邮箱验证成功');
     })

  }

  //失败
  function onFinishFailed() {

  }

  async function senSms(){
    if (/^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/.test(form.email)){
      isDisabled.value = true;
      setInterval(() => {
        if (defaultCount.value<=0){
          isDisabled.value = false;
          defaultCount.value = count;
        }
        defaultCount.value --;
      },1000)
      const params:EmailModel = {
        email: form.email,
        theme: '短信验证码',
        straightMatter: '此验证嘛用于验证'
      }
      sendEmail(params).then(res => {
        createMessage.success('发送验证码成功')
      });
    } else {
      createMessage.error('邮箱格式不正确')
    }
  }

  return {
    form,
    onFinish,
    onFinishFailed,
    isLoading,
    senSms
  }
}

const {form, onFinish, onFinishFailed, isLoading,senSms} = useForm(currentStep);


function  verify(){
  verifyEmail(form.codeSms).then(res => createMessage.success('验证成功'))
}
</script>

<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-register';

.@{prefix-cls} {
  width: 100%;
  height: 100vh;
  overflow: auto;

  &__header {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    background-color: @theme-color;
    width: 100%;
    height: 56px;
    text-align: right;
    line-height: 56px;

    a {
      color: #fff !important;
      margin-right: 40px;

    }
  }

  &__body {
    height: calc(100vh - 56px);
    width: 900px;
    margin: 56px auto 0;

    &-form {
      &-box {
        width: 100%;
        height: 660px;

        &--step0 {
          &-content {
            width: 100%;
            height: 530px;
            background-color: #F5F7F9;
            border: 1px solid #e3e3e3;
            overflow: auto;
          }

        }

        &--step1 {
          &-content {
            padding: 30px 0;
            width: 100%;
            //height: 530px;
            border: 1px solid #e3e3e3;
          }

        }

        //注册须知
        &-title {
          text-align: center;
          margin: 0 auto;
          font-weight: bold;
          font-size: 1.1rem;
        }
      }

    }
  }
}


.f-input {
  width: 350px;
}
</style>
